<template>
  <div class="w-full p-10 bg-[#f6f6f6]" id="div-1">
    <a-card class="w-full rounded-xl overflow-hidden border-1 border-solid border-[#f483a7]" id="a-card-36">
      <a-flex class="bg-[#f497ad] py-3 px-5" justify="space-between" id="a-flex-37">
        <a-typography-title :level="4" class="!text-[#fff] text-right !mb-0" id="a-typography-title-38">女生频道</a-typography-title>
        <a-space id="a-space-39">
          <template v-for="(item, index) in dataList4" :key="index">
            <a-badge color="#fff" v-if="index !== 0" :id="`a-badge-40-${index}`" />
            <a-typography-link href="#" class="!text-[#fff] mr-1" :id="`a-typography-link-41-${index}`">{{ item }}</a-typography-link>
          </template>
        </a-space>
      </a-flex>
      <a-row id="a-row-42">
        <a-col :span="7" id="a-col-43">
          <a-tabs :activeKey="0" type="card" id="a-tabs-44">
            <template #renderTabBar>
              <a-flex class="bg-[#e4e4e4] mb-4" align="center" id="a-flex-45">
                <a-typography-text
                  class="text-lg block px-2 py-2 text-center bg-[#e5e5e5] text-[#999]"
                  :class="index === 0 ? 'text-[#f483a7] w-[40%]  !bg-[#fff] text-xl' : 'w-[60%]'"
                  v-for="(item, index) in dataList5"
                  :key="index"
                  :id="`a-typography-text-46-${index}`"
                >
                  {{ item.category }}
                </a-typography-text>
              </a-flex>
            </template>
            <a-tab-pane v-for="(item, index) in dataList5" :key="index" :id="`a-tab-pane-47-${index}`">
              <a-list class="px-4 mb-4" :id="`a-list-48-${index}`">
                <a-list-item
                  v-for="(item1, index1) in item.list"
                  :key="index1"
                  class="!p-0 !mb-0 !py-1"
                  :id="`a-list-item-49-${index}-${index1}`"
                >
                  <a-typography-link href="#" class="!text-[#999] line-clamp-1" :id="`a-typography-link-50-${index}-${index1}`">
                    <a-typography-text
                      class="rounded-full px-1 bg-[#f483a7] text-[#fff]"
                      :class="index1 > 2 ? '!bg-[#aeacac]' : ''"
                      :id="`a-typography-text-51-${index}-${index1}`"
                    >
                      {{ item1.index }}
                    </a-typography-text>
                    {{ item1.text }}
                  </a-typography-link>
                  <a-typography-text class="whitespace-nowrap ml-2 text-[#999]" :id="`a-typography-text-52-${index}-${index1}`">{{
                    item1.num
                  }}</a-typography-text>
                </a-list-item>
                <a-list-item class="!p-0 !mb-0 !py-1" :id="`a-list-item-53-${index}`">
                  <a-typography-link
                    href="#"
                    class="!text-[#f483a7] !py-1 block w-full border-0 border-solid !border-b-[1px] !border-[#efefef]"
                    :id="`a-typography-link-54-${index}`"
                    >查看更多</a-typography-link
                  >
                </a-list-item>
              </a-list>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :span="10" id="a-col-55">
          <div class="px-6" id="div-56">
            <a-typography-title :level="5" class="w-full py-4 !mb-0" id="a-typography-title-57">
              精品推荐
              <a-typography-link href="#" class="!text-[#333] float-right" id="a-typography-link-58">
                更多 <PlusOutlined id="plusoutlined-59"></PlusOutlined
              ></a-typography-link>
            </a-typography-title>
            <a-divider class="!mt-0" id="a-divider-60" />
            <a-row :gutter="[0, 12]" id="a-row-61">
              <a-col :span="12" v-for="(item, index) in dataList6" :key="index" :id="`a-col-62-${index}`">
                <a-flex :id="`a-flex-63-${index}`">
                  <a-image :preview="false" :src="item.img" width="45%" class="!h-full" :id="`a-image-64-${index}`" />
                  <div class="pl-2 w-[55%]" :id="`div-65-${index}`">
                    <a-typography-link href="#" class="block font-bold !text-[#333]" :id="`a-typography-text-66-${index}`">{{
                      item.title
                    }}</a-typography-link>
                    <a-typography-text class="block font-bold mb-4" :id="`a-typography-text-67-${index}`"
                      >作者：{{ item.auth }}</a-typography-text
                    >
                    <a-typography-link
                      href="#"
                      class="block bg-[#f497ad] w-[80%] text-center rounded-full py-1 !text-[#fff] mb-1"
                      :id="`a-typography-link-68-${index}`"
                    >
                      开始阅读
                    </a-typography-link>
                    <a-typography-link
                      href="#"
                      class="block bg-[#00a494] w-[80%] text-center rounded-full py-1 !text-[#fff] mb-1"
                      :id="`a-typography-link-69-${index}`"
                    >
                      收藏本书
                    </a-typography-link>
                  </div>
                </a-flex>
                <a-typography-link href="#" class="!text-[#999] line-clamp-2" :id="`a-typography-link-70-${index}`">{{
                  item.text
                }}</a-typography-link>
              </a-col>
            </a-row>
          </div>
        </a-col>
        <a-col :span="7" id="a-col-71">
          <a-tabs :activeKey="0" type="card" id="a-tabs-72">
            <template #leftExtra>
              <div class="bg-[#e5e5e5] px-10 py-1 text-xl" id="div-73"> 收藏榜 </div>
            </template>
            <template #renderTabBar>
              <a-flex class="bg-[#e4e4e4] mb-4" justify="end" id="a-flex-74">
                <a-typography-text class="w-full block px-2 py-2 text-xl ml-auto" id="a-typography-text-75"> 收藏榜 </a-typography-text>
                <a-typography-text
                  class="text-xl block px-2 py-2 text-[#999]"
                  :class="index === 0 ? 'text-[#f483a7] bg-[#ffff]' : ''"
                  v-for="(item, index) in dataList7"
                  :key="index"
                  :id="`a-typography-text-76-${index}`"
                >
                  {{ item.category }}
                </a-typography-text>
              </a-flex>
            </template>
            <a-tab-pane v-for="(item, index) in dataList7" :key="index" :id="`a-tab-pane-77-${index}`">
              <a-list class="px-4 mb-4" :id="`a-list-78-${index}`">
                <a-list-item
                  v-for="(item1, index1) in item.list"
                  :key="index1"
                  class="!p-0 !mb-0"
                  :id="`a-list-item-79-${index}-${index1}`"
                >
                  <a-typography-link href="#" class="flex w-full" v-if="index1 === 0" :id="`a-typography-link-80-${index}-${index1}`">
                    <a-typography-text
                      class="block w-7 h-5 rounded-full px-1 bg-[#f483a7] text-[#fff] mr-1 text-center"
                      :class="index1 > 2 ? '!bg-[#aeacac]' : ''"
                      :id="`a-typography-text-81-${index}-${index1}`"
                    >
                      {{ item1.index }}
                    </a-typography-text>
                    <a-image :preview="false" :src="item1.img" width="30%" :id="`a-image-82-${index}-${index1}`" />
                    <div class="pl-2 w-[60%]" :id="`div-83-${index}-${index1}`">
                      <a-typography-text class="block mt-1 font-bold" :id="`a-typography-text-84-${index}-${index1}`">{{
                        item1.text
                      }}</a-typography-text>
                      <a-typography-text class="block mt-2 text-[#999]" :id="`a-typography-text-85-${index}-${index1}`"
                        >作者：{{ item1.auth }}</a-typography-text
                      >
                      <a-typography-text class="block mt-2 text-[#999]" :id="`a-typography-text-86-${index}-${index1}`"
                        >分类：{{ item1.type }}</a-typography-text
                      >
                    </div>
                  </a-typography-link>
                  <a-typography-link href="#" class="!text-[#999] line-clamp-1 py-1" v-else :id="`a-typography-link-87-${index}-${index1}`">
                    <a-typography-text
                      class="rounded-full px-1 bg-[#f483a7] text-[#fff]"
                      :class="index1 > 2 ? '!bg-[#aeacac]' : ''"
                      :id="`a-typography-text-88-${index}-${index1}`"
                    >
                      {{ item1.index }}
                    </a-typography-text>
                    {{ item1.text }}
                  </a-typography-link>
                </a-list-item>
                <a-list-item class="!p-0 !mb-0 !py-1" :id="`a-list-item-89-${index}`">
                  <a-typography-link
                    href="#"
                    class="!text-[#999] !py-1 block w-full border-0 border-solid !border-b-[1px] !border-[#efefef]"
                    :id="`a-typography-link-90-${index}`"
                    >查看更多</a-typography-link
                  >
                </a-list-item>
              </a-list>
            </a-tab-pane>
          </a-tabs>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>



<script setup>
const dataList4 = ['穿越言情', '古代言情', '都市言情', '校园言情', '玄幻仙侠', '明星同人'];
const dataList5 = [
  {
    category: '热门连载',
    list: [
      { text: '七零万人嫌，嫁退伍军官后多胎了', index: '01', num: '更新：5.3万' },
      { text: '替嫁三年抱两，堂姐眼红哭了', index: '02', num: '更新：5.2万' },
      { text: '为奴三年，不原谅！整个侯府悔断肠', index: '03', num: '更新：4.5万' },
      { text: '随军两年不同房，军婚也得离', index: '04', num: '更新：4.5万' },
      { text: '小奶团超凶，靠抓鬼富养六个爷爷', index: '05', num: '更新：4.3万' },
      { text: '父子齐跪求原谅？滚，挡我震边关了', index: '06', num: '' },
      { text: '七零大院，最强军少娶了个人嫌', index: '07', num: '更新：4.3万' },
      { text: '真千金从修真界杀回来了', index: '08', num: '4.2万更新：4.2万' },
      { text: '穿成兽世万人嫌，雄性们都抢疯了', index: '09', num: '更新：3.8万' },
      { text: '闺蜜成敌？她马开你们三个过吧', index: '10', num: '更新：3.2万' },
      { text: '重生！渣女？我马甲一脱都别活', index: '11', num: '更新：3.2万' },
      { text: '穿成国公老夫人后我把不孕孙儿全踹了', index: '12', num: '更新：3.1万' },
      { text: '渣男为白月光抽女儿骨髓，我杀疯了', index: '13', num: '更新：2.9万' },
    ],
  },
  {
    category: '人气新书',
  },
];
const dataList6 = [
  {
    img: 'https://picsum.photos/id/31/100/130',
    title: '《鸣镝风云录上册(简体)》',
    auth: '梁羽生',
    text: '“珠蘼半卷香车过，响箭连..',
  },
  {
    img: 'https://picsum.photos/id/32/100/130',
    title: '《鸣镝风云录下册(简体)》',
    auth: '梁羽生',
    text: '“珠蘼半卷香车过，响箭连..',
  },
  {
    img: 'https://picsum.photos/id/33/100/130',
    title: '《狂侠天骄魔女上册(简体)》',
    auth: '梁羽生',
    text: '小说以宋金两国在采石矶的战斗为历史背景，描述了生活在金人统治地区的侠女…',
  },
  {
    img: 'https://picsum.photos/id/34/100/130',
    title: '《狂侠天骄魔女下册(简体)》',
    auth: '梁羽生',
    text: '小说以宋金两国在采石矶的战斗为历史背景，描述了生活在金人统治…',
  },
];
const dataList7 = [
  {
    category: '周',
    list: [
      { text: '《天才小毒妃》', index: '01', num: '', img: 'https://picsum.photos/id/41/50/55', auth: '芥末', type: '加工小说' },
      { text: '王牌女助', index: '02', num: '' },
      { text: '黑凰后', index: '03', num: '' },
      { text: '错嫁当天，豪门继承人拉着我领证', index: '04', num: '' },
      { text: '婚到浓时，总裁请淡定', index: '05', num: '' },
      { text: '千亿新娘，总裁大人请温柔', index: '06', num: '' },
      { text: '诱爱成婚，腹黑老公难招架', index: '07', num: '' },
      { text: '神厨狂后', index: '08', num: '' },
      { text: '王爷驾到：萌妃吐槽请稍后', index: '09', num: '' },
      { text: '总裁误宠替身甜妻', index: '10', num: '' },
      { text: '一笙有喜', index: '11', num: '' },
    ],
  },
  {
    category: '月',
  },
  {
    category: '总',
  },
];
</script>
<style scoped></style>